<template>
  <div id="app">
    <!-- <my-child></my-child>
    <scroll></scroll> -->
    <!-- <tree></tree> -->
    <ele-table></ele-table>
    <color-band :colors="colors" @onColorChange="onColorChange" :colorRange="'0-12'"></color-band>
  </div>
</template>

<script>
// 同步方式引入组件
// 生命周期执行顺序：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
// import child from './components/lifecycle/child'
// 异步方式引入组件
// 生命周期执行顺序：父beforeCreate->父created->父beforeMount->父mounted->子beforeCreate->子created->子beforeMount->子mounted
// const child = () => import('@/components/lifecycle/child')

// import scroll from './components/study/scroll'
// import tree from './components/el-tree/index2'
import eletable from './components/el-table'
import colorBand from './components/colorBand'
import {
  gradientColor
} from './utils/gradientColor'

export default {
  data() {
    return {
      colorIndex: 0,
      colors: [
        {
          label: 0,
          value: [
            '#006837',
            '#1a9850',
            '#66bd63',
            '#a6d96a',
            '#d9ef8b',
            '#ffffbf',
            '#fee08b',
            '#fdae61',
            '#f46d43',
            '#d73027',
            '#a50026'
          ]
        },
        {
          label: 1,
          value: [
            '#fce2c7',
            '#b8b3fc',
            '#b4fcb3',
            '#cccccc',
            '#fcc6b3',
            '#b3b8fc',
            '#fcb6f3',
            '#fcdecc',
            '#bdfce4',
            '#b3fcb7'
          ]
        },
        {
          label: 2,
          value: [
            '#df82e0',
            '#dd37fa',
            '#da32f0',
            '#f9c5fa',
            '#e569f5',
            '#cb6de8',
            '#d56cf0',
            '#f553f5',
            '#aa62b5',
            '#ea87ed'
          ]
        },
        {
          label: 3,
          value: gradientColor('#000000', '#FFFFFF', 10)
        },
        {
          label: 4,
          value: gradientColor('#f5f39a', '#6b0000', 10)
        },
        {
          label: 5,
          value: gradientColor('#ffc800', '#2e00fa', 10)
        },
        {
          label: 6,
          value: gradientColor('#ff3300', '#0000ff', 10)
        },
        {
          label: 7,
          value: gradientColor('#ffa299', '#9999ff', 10)
        },
        {
          label: 8,
          value: gradientColor('#f72500', '#00f500', 10)
        },
        {
          label: 9,
          value: gradientColor('#23cf23', '#0220e3', 10)
        }
      ]
    }
  },
  methods: {
    onColorChange(val) {
      this.colorIndex = val
    }
  },
  components: {
    // 'my-child': child,
    // scroll,
    // tree
    'ele-table': eletable,
    'color-band': colorBand
  },
  beforeCreate() {
    console.log('father:', 'beforeCreate')
  },
  created() {
    console.log('father:', 'created')
  },
  beforeMount() {
    console.log('father:', 'beforeMount')
  },
  mounted() {
    console.log('father:', 'mounted')
  },
  beforeUpdate() {
    console.log('father:', 'beforeUpdate')
  },
  updated() {
    console.log('father:', 'updated')
  }
}
</script>
